"use client";
import AboutSectionOne from "@/components/About/AboutSectionOne";
import AboutSectionTwo from "@/components/About/AboutSectionTwo";
import Breadcrumb from "@/components/Common/Breadcrumb";

import { Metadata } from "next";
import SectionTitle from "@/components/Common/SectionTitle";
import Image from "next/image";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination, Scrollbar, A11y } from "swiper/modules";
import "swiper/css"; // 引入样式
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
/*export const metadata: Metadata = {
  title: "About Page | Free Next.js Template for Startup and SaaS",
  description: "This is About Page for Startup Nextjs Template",
  // other metadata
};*/

const AboutPage = () => {
  return (
    <>
      <Breadcrumb
        pageName="案件管理系统CMP"
        description="通过数字化手段，简化工作流程，提高工作效率，确保信息的安全与准确。"
      />

      <section className="pt-16 md:pt-20 lg:pt-28">
        <div className="container">
          <div className="border-b border-body-color/[.15] pb-16 dark:border-white/[.15] md:pb-20 lg:pb-28">
            <div className="-mx-4 flex flex-wrap items-center">
              <div className="w-full px-4 lg:w-1/2">
                <div className="relative mx-auto aspect-[16/9] max-w-[500px] lg:mr-0">
                  <Image
                    src="/images/cmp/block1.png"
                    alt={"案件管理系统"}
                    fill
                    className="mx-auto max-w-full drop-shadow-three  dark:drop-shadow-none lg:mr-0"
                  />
                </div>
              </div>
              <div className=" w-full px-4 lg:w-1/2">
                <SectionTitle
                  title="数字化赋能，为案件传递和处理提供一站式服务"
                  paragraph={
                    <span className={"indent-7"}>
                      在当今社会，法律事务日益复杂，案件数量不断攀升，如何高效管理案件和处理案件成为了相关工作者面临的挑战。传统线下沟通、纸质文档管理和手动记录的方式已无法满足现代化办公的需求，为此，我们推出了一款全新的智能案件管理系统，旨在通过数字化手段提高工作效率，为案件传递和案件处理提供一站式服务。
                    </span>
                  }
                  mb="44px"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className={`container mt-10`}>
        <h2 className="mb-4 text-2xl font-bold !leading-tight text-black dark:text-white sm:text-4xl md:text-[20px]">
          律所律师入驻模式
        </h2>
        <p className="text-base !leading-relaxed text-body-color md:text-lg">
          该模式下，需要对律所和律师的资质进行认证，将律所和律师进行一对多绑定，律所负责人可随时查看律师案件处理情况和进度；
        </p>
      </div>
      <div className={`container mt-10`}>
        <h2 className="mb-4 text-2xl font-bold !leading-tight text-black dark:text-white sm:text-4xl md:text-[20px]">
          案件发布模式
        </h2>
        <p className="text-base !leading-relaxed text-body-color md:text-lg">
          案件录入系统之后，支持对案件进行发布，发布后的案件就可以被律师进行接取，大大缩短了案件处理的时间成本和人力成本。
        </p>
      </div>
      <div className={`container mt-10`}>
        <h2 className="mb-4 text-2xl font-bold !leading-tight text-black dark:text-white sm:text-4xl md:text-[20px]">
          独立、精细、高度配置化
        </h2>
        <p className="text-base !leading-relaxed text-body-color md:text-lg">
          由于不同的案件案情不一样，涉及的案件信息也不相同，我们的案件管理系统支持针对不同的案由分别设置不同的案件信息，以面对多样、复杂的案件场景。
        </p>
      </div>

      <div className={`container mt-10`}>
        <h2 className="mb-4 text-2xl font-bold !leading-tight text-black dark:text-white sm:text-4xl md:text-[20px]">
          案件录入与追踪
        </h2>
        <p className="text-base !leading-relaxed text-body-color md:text-lg">
          支持快速录入案件基本信息，包括案件编号、类型、当事人信息等，并实时更新案件进展状态，实现从立案到结案全程跟踪。
        </p>
      </div>

      <div className={`container mt-10`}>
        <h2 className="mb-4 text-2xl font-bold !leading-tight text-black dark:text-white sm:text-4xl md:text-[20px]">
          清晰严谨的案件流程管理
        </h2>
        <p className="text-base !leading-relaxed text-body-color md:text-lg">
          配套的案件处理流程，覆盖了案情分析、盖章申请、立案、...
          、结案全过程，还支持及时记录调解和还款信息，保证不遗漏任何案件细节。
        </p>
      </div>

      <div className={`container mt-10`}>
        <Swiper
          modules={[Navigation, Pagination, A11y]}
          spaceBetween={50}
          slidesPerView={1}
          navigation
          pagination={{ clickable: true }}
          onSwiper={(swiper) => console.log(swiper)}
          onSlideChange={() => console.log("slide change")}
          loop={true}
          autoplay={true}
          speed={1000}
          centeredSlides={true}
          effect={"coverflow"}
          coverflowEffect={{
            rotate: 30,
            stretch: 10,
            depth: 60,
            modifier: 2,
            slideShadows: true,
          }}
        >
          <SwiperSlide>
            <div style={{ width: "100%", height: "650px" }}>
              <Image src="/images/cmp/banner1.jpg" fill alt="" />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div style={{ width: "100%", height: "650px" }}>
              <Image src="/images/cmp/banner2.jpg" fill alt="" />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div style={{ width: "100%", height: "650px" }}>
              <Image src="/images/cmp/banner3.jpg" fill alt="" />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div style={{ width: "100%", height: "650px" }}>
              <Image src="/images/cmp/banner4.jpg" fill alt="" />
            </div>
          </SwiperSlide>
          <SwiperSlide>
            <div style={{ width: "100%", height: "650px" }}>
              <Image src="/images/cmp/banner5.jpg" fill alt="" />
            </div>
          </SwiperSlide>
        </Swiper>
      </div>
    </>
  );
};

export default AboutPage;
